<template>
	<view class="">
		<u-navbar :is-back="true" title=" " :border-bottom="false" :custom-back="goHome"></u-navbar>
		<view class="bigtitle">
			<view class="title">
				待付款
			</view>
			<view class="tip">请在13:45内完成订单支付，超时将自动取消哦～ </view>
		</view>
		<view class="order">
			<view class="item">
				<view class="left">
					<image :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
						mode="aspectFill"></image>
				</view>
				<view class="content">
					<view class="title u-line-2">
						日常清洁 2小时1人急速清洁全程质保
					</view>
					<view class="price">¥600</view>
				</view>
			</view>
			<view class="list">
				<view class="left">
					商品总价
				</view>
				<view class="right">
					￥600
				</view>
			</view>
			<view class="list">
				<view class="left">
					优惠券
				</view>
				<view class="right red">
					-20
				</view>
			</view>
			<view class="line"></view>
			<view class="list">
				<view class="left">
					小计
				</view>
				<view class="right red">
					580
				</view>
			</view>
		</view>
		<view class="order">
			<view class="title">
				预约信息
			</view>
			<view class="list">
				<view class="left">
					上门地址
				</view>
				<view class="right">
					徐汇区黎梅花园88栋3单元101
				</view>
			</view>
			<view class="list">
				<view class="left">
					预约时间
				</view>
				<view class="right">
					2024-03-23 10:00
				</view>
			</view>
			<view class="list">
				<view class="left">
					联系方式
				</view>
				<view class="right">
					19256784886
				</view>
			</view>
			<view class="line"></view>
			<view class="list">
				<view class="left">
					服务人员
				</view>
				<view class="right">
				</view>
			</view>
			<view class="people">
				<view class="circle">
					<image :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
						mode="aspectFill"></image>
				</view>
				<view class="detail">
					<view>
						王小骞 99%好评
					</view>
					<view>
						洗衣做饭 家庭清洁
					</view>
				</view>
				<view class="circle_list">
					<view class="circle">
						<u-icon name="chat" class="icon"></u-icon>
					</view>
					<view class="circle">
						<u-icon name="phone" class="icon"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="title">
				订单信息
			</view>
			<view class="list">
				<view class="left">
					订单编号
				</view>
				<view class="right">
					2400126670 复制
				</view>
			</view>
			<view class="list">
				<view class="left">
					下单时间
				</view>
				<view class="right">
					2023-01-12 10:34:33
				</view>
			</view>
		</view>
		<view class="empty"></view>
		<view class="foot">
			<view class="bottom">
				<view class="btn" @click.stop="cancelOrder(item.id)">取消订单</view>
				<view class="btn" @click.stop="modifyOrder(item.id)">修改订单信息</view>
				<view class="pbtn" @click.stop="continuePay(item.id)">继续支付</view>
			</view>
		</view>
	</view>
</template>

<script>
import config from "@/common/config.js" // 全局配置文件
export default {
	data() {
		return {

		}
	},
	onLoad: function (option) {
		let houseId = option.houseId //上个页面传递的参数。
		this.houseId = houseId
		// 渲染当前房源信息
		this.findHouseById(houseId);
	},
	methods: {
		findHouseById(houseId) {
		},
	}
}
</script>

<style>
/* page不能写带scope的style标签中，否则无效 */
page {
	background-color: #f2f2f2;
}
</style>


<style lang="scss" scoped>
.bigtitle {
	padding-top: 20rpx;
	padding-left: 35rpx;

	.title {
		font-size: 50rpx;
		padding-bottom: 10rpx;
	}

	.tip {
		color: gray;
	}

	.icon {
		font-size: 35rpx;
	}
}

.order {
	width: 680rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;

	.title {
		font-size: large;
	}

	.top {
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;

			.store {
				// margin: 0 10rpx;
				color: red;
			}
		}

		.state {
			float: right;
			color: #6c7cf4;
		}

		.right {
			color: #2979ff;
		}
	}

	.item {
		display: flex;
		margin: 20rpx 0 0 0;

		.left {
			margin-right: 30rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
		}

		.content {
			.title {
				font-weight: bold;
				font-size: 28rpx;
				line-height: 50rpx;
			}

			.price {
				margin: 20rpx 0;
				font-size: 30rpx;
			}

			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}

			.desc {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
		}
	}

	.bottom {
		display: flex;
		margin-top: 20rpx;
		padding: 0 10rpx;
		justify-content: flex-end;
		align-items: center;

		.btn {
			margin-left: 20rpx;
			height: 70rpx;
			line-height: 65rpx;
			// width: 160rpx;
			padding-left: 30rpx;
			padding-top: 0rpx;
			padding-right: 30rpx;
			display: inline-block;
			white-space: nowrap;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: black;
		}

		.pbtn {
			margin-left: 20rpx;
			height: 70rpx;
			line-height: 65rpx;
			// width: 160rpx;
			padding-left: 30rpx;
			padding-top: 0rpx;
			padding-right: 30rpx;
			display: inline-block;
			white-space: nowrap;
			border-radius: 26rpx;
			font-size: 26rpx;
			text-align: center;
			color: white;
			background-color: #6c76f4;
			border: 2rpx solid #6c76f4;
		}

		.evaluate {
			// color: #2979ff;
			// border-color: #2979ff;
			color: $u-tips-color;
			border-color: $u-tips-color;
		}
	}

	.list {
		display: flex;

		.left,
		.right {
			flex: 1;
			/* 使左右部分平分容器宽度 */
			padding: 10rpx;
			box-sizing: border-box;
		}

		.left {
			color: gray
		}

		.right {
			flex: 2;
			text-align: right;
			float: right;
			text-align: right;
		}

		.red {
			color: red;
		}
	}

	.people {
		width: 600rpx;
		margin: 20rpx;
		height: 130rpx;
		background-color: #f3f3f3;
		border-radius: 20rpx;
		display: flex;
		padding: 25rpx;

		.circle_list {
			display: flex;
			float: right;
		}

		.circle {
			background-color: white;
			border: 1rpx solid #e2e2e2;
			width: 75rpx;
			height: 75rpx;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			margin-left: 20rpx;
			.icon {
				font-size: 40rpx;
			}

			image {
				width: 75rpx;
				height: 75rpx;
				border-radius: 40rpx;
			}
		}

		.detail {
			width: 300rpx;
			padding-left: 20rpx;
		}
	}

	.line {
		border-bottom: 1rpx solid #e2e2e2;
	}
}

.bottom {
	display: flex;
	margin-top: 20rpx;
	padding: 0 10rpx;
	justify-content: flex-end;
	align-items: center;

	.btn {
		margin-left: 20rpx;
		height: 70rpx;
		line-height: 65rpx;
		// width: 160rpx;
		padding-left: 30rpx;
		padding-top: 0rpx;
		padding-right: 30rpx;
		display: inline-block;
		white-space: nowrap;
		border-radius: 26rpx;
		border: 2rpx solid $u-border-color;
		font-size: 26rpx;
		text-align: center;
		color: black;
	}

	.pbtn {
		margin-left: 20rpx;
		height: 70rpx;
		line-height: 65rpx;
		// width: 160rpx;
		padding-left: 30rpx;
		padding-top: 0rpx;
		padding-right: 30rpx;
		display: inline-block;
		white-space: nowrap;
		border-radius: 26rpx;
		font-size: 26rpx;
		text-align: center;
		color: white;
		background-color: #6c76f4;
		border: 2rpx solid #6c76f4;
	}

	.evaluate {
		// color: #2979ff;
		// border-color: #2979ff;
		color: $u-tips-color;
		border-color: $u-tips-color;
	}
}

.empty {
	height: 190rpx;
}

.foot {
	height: 150rpx;
	display: flex;
	flex-direction: column;
	background-color: white;
	padding-top: 20rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
}
</style>
